<template>
  <div class="mod-config" style="width: 100%;height: 100%;min-height: 815px;">
    <!--<center>-->
      <!--<div style="font-size: 20px;color: #909399">站内推送暂未完善，请前往友盟后台推送<a href="https://passport.umeng.com/login?appId=push_portal&output=embed" target="_blank">[立即前往]</a>，如有不便，请联系管理员（友盟账户密码及试用方式请联系管理员获取）</div>-->
    <!--</center>-->
    <el-card class="box-card" style="box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="阿里云推广短信群发" name="second"></el-tab-pane>
        <el-tab-pane label="麦讯通推广短信群发" name="first"></el-tab-pane>
      </el-tabs>

      <el-form ref="dataForm" :model="dataForm" label-width="100px" :rules="rules">
        <div v-show="activeName === 'first'">
          <el-form-item label="任务名称：" prop="title" >
            <el-input v-model="dataForm.title" placeholder="任务名称" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="短信内容：" prop="content">
            <el-input v-model="dataForm.content" type="textarea" placeholder="短信内容" style="width: 300px"></el-input>
          </el-form-item>
        </div>
        <div v-show="activeName === 'second'">
          <el-form-item label="* 产品类型: ">
            <el-input placeholder="国内消息" v-model="input" :disabled="true" style="width:326px" />
          </el-form-item>
          <el-form-item label="* 短信签名: ">
            <el-input v-model="dataForm.signNameJson" placeholder="送贝" :disabled="true" style="width:326px" />
          </el-form-item>
          <el-form-item label="* 短信模版: " prop="">
            <el-select v-model="dataForm.templateCode" placeholder="请选择" style="width:326px">
              <el-option
                v-for="(item,index) in templateList"
                :key="index"
                :label="item.templateName"
                :value="item.templateCode" />
            </el-select><br/>
            <span>没有需要的模版，<a href="javascript: void(0)" @click="addTemplateHandle" style="color: #00b7ee">马上添加模版</a>,
                   查看<a href="javascript: void(0)" @click="selectTemplateHandle" style="color: #00b7ee">已有模版</a></span>
          </el-form-item>
        </div>
        <el-form-item label="目标用户：" prop="sendType">
          <el-radio-group v-model="dataForm.sendType" @change="updateSendType()">
            <el-radio label="0">全部用户</el-radio>
            <el-radio label="1">部分用户</el-radio>
            <el-radio label="2">指定用户</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="发送条件：" prop="conditionType" v-if="dataForm.sendType === '1'">
          <el-radio-group v-model="dataForm.conditionType">
            <el-radio-button label="0">用户类型</el-radio-button>
            <el-radio-button label="1">下单时间</el-radio-button>
            <el-radio-button label="2">用户活跃</el-radio-button>
            <el-radio-button label="3">注册时间</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户类型：" prop="userType" v-if="dataForm.conditionType === '0'">
          <el-radio-group v-model="dataForm.userType">
            <el-radio label="1">运营商</el-radio>
            <el-radio label="2">普通联盟店</el-radio>
            <el-radio label="3">消费者</el-radio>
            <el-radio label="4">VIP会员</el-radio>
            <el-radio label="5">中级版联盟店</el-radio>
            <el-radio label="6">高级版联盟店</el-radio>
            <el-radio label="7">城市合伙人</el-radio>
            <el-radio label="8">城市合伙人联盟店</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="时间区间：" prop="time" v-if="dataForm.conditionType === '1' || dataForm.conditionType === '2' || dataForm.conditionType === '3'">
          <el-date-picker
          :editable="false"
          v-model="dataForm.time"
          type="daterange"
          value-format = "yyyy-MM-dd HH:mm:ss"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="用户账号：" prop="userName" v-if="dataForm.sendType === '2'">
          <el-input v-model="dataForm.userName" placeholder="用户账号" style="width: 300px"></el-input>
        </el-form-item>
        <div style="width: 1600px;" v-if="this.show">
          <el-table
            :data="dataList"
            border
            style="width: 30%;">
            <el-table-column
                prop="id"
                header-align="center"
                align="center"
                label="ID">
            </el-table-column>
            <el-table-column
                prop="userName"
                header-align="center"
                align="center"
                label="会员名">
            </el-table-column>
            <el-table-column
                prop="mobile"
                header-align="center"
                align="center"
                label="手机号码">
            </el-table-column>
            <el-table-column
                header-align="center"
                align="center"
                width="150"
                label="操作">
                <template slot-scope="scope">
                <el-button type="text" size="small" @click="deleteHandle(scope.$index, scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
          </el-table>
            <el-pagination
            style="float:left"
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </div>
      </el-form>
      <div style="float: right">
        <el-button v-if="this.dataList.length > 0" icon="el-icon-download" type="primary" @click="excel()">导出</el-button>
        <el-button @click="getUser" type="warning">查看用户</el-button>
        <el-button v-if="activeName === 'first'" @click="sends" type="primary">发送短信</el-button>
        <el-button v-if="activeName === 'second'" @click="sendBatchSms" type="primary">发送短信</el-button>
      </div>
    </el-card>
    <add-template v-if="addVisible" ref="addTemplate" @refreshTemplate="getTemplateDataList"></add-template>
    <select-template v-if="selectVisible" ref="selectTemplate"></select-template>
  </div>
</template>

<script>
//   import AllianceStoreInfo from './alliance-store-info'
//   import Goods from './goods'
//   import SpikeActivity from './spike-activity'
//   import GoodsClass from './goods-class'
//   import AllianceStoreClass from './alliance-store-class'
  import AddTemplate from './add-template'
  import SelectTemplate from './select-template'
  export default {
    data () {
      return {
        activeName: 'second',
        input: '',
        show: false,
        addVisible: false,
        selectVisible: false,
        templateList: [],
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataForm: {
          signNameJson: '送贝',
          templateCode: '',
          conditionType: '',
          title: '',
          content: '',
          sendType: '',
          userType: '',
          time: new Date(),
          userName: '',
          id: []
        },
        rules: {
          content: [
            {required: true, message: '内容不能为空', trigger: 'blur'}
          ],
          platform: [
            {required: true, message: '不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    components: {
    //   AllianceStoreInfo,
    //   Goods,
    //   SpikeActivity,
    //   GoodsClass,
    //   AllianceStoreClass
      AddTemplate,
      SelectTemplate
    },
    activated () {
      this.getTemplateDataList()
    },
    methods: {
      addTemplateHandle () {
        this.addVisible = true
        this.$nextTick(() => {
          this.$refs.addTemplate.init()
        })
      },
      selectTemplateHandle () {
        this.selectVisible = true
        this.$nextTick(() => {
          this.$refs.selectTemplate.getTemplateList()
        })
      },
      handleClick (tab, event) {
        console.log(tab, event)
        if (this.activeName === 'second') {
          this.getTemplateDataList()
        }
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      setData (data) {
        this.dataForm.data = data
      },
      deleteHandle (index, id) {
        this.dataList.splice(index, 1)
        this.dataForm.id.push(id)
      },
      getTemplateDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/message/queryTemplateList'),
          method: 'post'
        }).then(({data}) => {
          this.templateList = data.data
          this.dataListLoading = false
        })
      },
      getUser () {
        if (this.dataForm.sendType === '1' || this.dataForm.sendType === '2') {
          if (this.dataForm.conditionType !== '') {
            if (this.dataForm.conditionType === '0') {
              if (this.dataForm.userType === '') {
                this.$message.error('请选择要发送的用户类型！')
                return
              }
            } else if (this.dataForm.conditionType === '1' || this.dataForm.conditionType === '2' || this.dataForm.conditionType === '3') {
              // console.log(this.dataForm.time)
              if (this.dataForm.time === null) {
                this.$message.error('请选择时间区间！')
                return
              }
            }
          } else {
            if (this.dataForm.sendType !== '2') {
              this.$message.error('未选择发送条件！')
              return
            }
          }
        }
        this.$http({
          url: this.$http.adornUrl('/message/queryShortMessageUser'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'sendType': this.dataForm.sendType,
            'startTime': this.dataForm.time[0],
            'endTime': this.dataForm.time[1],
            'conditionType': this.dataForm.conditionType,
            'userType': this.dataForm.userType,
            'userName': this.dataForm.userName
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.show = true
            this.dataList = data.data.list
            this.totalPage = data.data.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
        })
      },
      sendBatchSms () {
        this.$confirm('确认发送吗？此操作不可撤回。')
          .then(_ => {
            this.$http({
              url: this.$http.adornUrl('/message/sendBatchSms'),
              method: 'post',
              params: this.$http.adornParams({
                'page': this.pageIndex,
                'limit': this.pageSize,
                'sendType': this.dataForm.sendType,
                'startTime': this.dataForm.time[0],
                'endTime': this.dataForm.time[1],
                'conditionType': this.dataForm.conditionType,
                'userType': this.dataForm.userType,
                'userName': this.dataForm.userName,
                'templateCode': this.dataForm.templateCode,
                'signNameJson': this.dataForm.signNameJson
              })
            }).then(({data}) => {
              if (data && data.code === 200) {
                this.$message({
                  message: '推送已发送',
                  type: 'success',
                  duration: 800,
                  onClose: () => {
                    Object.assign(this.$data, this.$options.data())
                  }
                })
                this.dataForm.conditionType = ''
                this.dataForm.title = ''
                this.dataForm.content = ''
                this.dataForm.sendType = ''
                this.dataForm.userType = ''
                this.dataForm.userName = ''
                this.dataForm.id = []
              } else {
                this.$message.error(data.msg)
              }
            })
          })
      },
      sends () {
        this.$confirm('确认发送吗？此操作不可撤回。')
          .then(_ => {
            this.$http({
              url: this.$http.adornUrl('/message/sendUser'),
              method: 'post',
              params: this.$http.adornParams({
                'page': this.pageIndex,
                'limit': this.pageSize,
                'sendType': this.dataForm.sendType,
                'startTime': this.dataForm.time[0],
                'endTime': this.dataForm.time[1],
                'conditionType': this.dataForm.conditionType,
                'userType': this.dataForm.userType,
                'userName': this.dataForm.userName,
                'title': this.dataForm.title,
                'content': this.dataForm.content,
                'id': this.dataForm.id
              })
            }).then(({data}) => {
              if (data && data.code === 200) {
                this.$message({
                  message: '推送已发送',
                  type: 'success',
                  duration: 800,
                  onClose: () => {
                    Object.assign(this.$data, this.$options.data())
                  }
                })
                this.dataForm.conditionType = ''
                this.dataForm.title = ''
                this.dataForm.content = ''
                this.dataForm.sendType = ''
                this.dataForm.userType = ''
                this.dataForm.userName = ''
                this.dataForm.id = []
              } else {
                this.$message.error(data.msg)
              }
            })
          })
      },
      updateSendType () {
        if (this.dataForm.sendType === '0' || this.dataForm.sendType === '2') {
          this.dataForm.conditionType = ''
        }
      },
      excel () {
        window.location.href = this.$http.adornUrl(`/message/exportShortMessageUser?token=${this.$cookie.get('token')}&sendType=${this.dataForm.sendType}&startTime=${this.dataForm.time[0]}&endTime=${this.dataForm.time[1]}&conditionType=${this.dataForm.conditionType}&userType=${this.dataForm.userType}&userName=${this.dataForm.userName}`)
      }
    }
  }
</script>
